<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div{
	width: 100px;height: 100px;background: red;
}

    </style>
</head>
<body>
<div id='div'></div>
<script type="text/javascript">
	
	function getStyle(obj,name){
		if(obj.currentStyle){
			return obj.currentStyle[name]
		}else{
			return getComputedStyle(obj,false)[name]
		}
	};

	/*move(div,'width',300,10,function(){
		move(div,'height',900,70);
	});
*/

	move(div,{
		'width':400,
		'height':300,
		'marginLeft':100
	},30)
	function move(obj,opt,timer,fn){
		clearInterval(obj.timer);
		var json = {};
		obj.timer = setInterval(function(){
			//var p = []
			
			for(var i in opt){
				json[i] = false;
				//obj[i] = false;
				var w = parseFloat(getStyle(obj,i));

			//	p.push(obj[i]);
				//100
				//console.log(w);

				//110
				var m = opt[i];

				if(w == m){
					json[i] = true;
					//console.log(json)

					//console.log(i)
					//json[i]=true;
					//obj[i] = true;
					//clearInterval(obj.timer);
					//fn && fn();
					return;
				}
				var speed = (m-w)/7;
				speed = speed>0?Math.ceil(speed):Math.floor(speed);

				//console.log(speed + ',' +w)
				//(200 - 100)/10
				//200 - 110 /9
				//console.log(i)
				obj.style[i] = w+speed+'px';


			}

			


			//110
			//119


		},timer);

	}
	
	
	
	
	//window.onclick = move;
</script>
</body>
</html>